<template>
  <div class="container">
    <navbar ref="navbar" theme="light" title="搜索"></navbar>
    <list>
      <header>
        <div class="type-list">
          <text v-for="sf in searchFromList" v-bind:key="sf.title" v-if="sf.title"
                :class="['type-list-item', sf === searchFrom && 'type-list-item-selected']"
                @click="selectSearchFrom(sf)">{{sf.title}}</text>
        </div>
        <div class="searchbar">
          <searchbar class="flex-1" slot="titleNode" v-model="keywords" :autofocus="autofocus" @search="search" style="margin-right: 10;"></searchbar>
          <text class="btn btn-warning btn-md" @click="search()">搜索</text>
        </div>
        <div>
          <text class="search-from-help">{{searchFrom.help}}</text>
        </div>
      </header>
      <cell>
        <div class="hots">
          <div class="hots-rows" v-for="(list, listIdx) in hotKeywordsRows" v-bind:key="listIdx">
            <text class="hots-item" v-for="k in list" v-bind:key="k" :keywords="k" @click="clickSearch">{{k}}</text>
          </div>
        </div>
      </cell>
      <cell>
        <div class="history" v-if="historyList.length">
          <div class="history-title">
            <text class="history-title-text">历史搜索</text>
            <text class="history-title-clear activeable" @click="clear">清空</text>
          </div>
          <template v-for="k in historyList">
            <div class="history-item activeable" v-bind:key="k" :keywords="k" @click="clickSearch">
              <text class="history-item-text">{{k}}</text>
              <text class="icon history-item-icon activeable" @click="removeItem" :keywords="k">&#xe61b;</text>
            </div>
          </template>
        </div>
      </cell>
    </list>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";
  @import "./sass/activeable";
  @import "./sass/buttons";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .flex-1 {
    flex: 1;
  }
  .search-from-help {
    color: $color-warning;
    background-color: #FFFFFF;
    font-size: 24px;
    padding: 20px 40px 10px 20px;
    line-height: 28px;
  }
  .type-list {
    padding: 0 0 0 0;
    /*background-color: #FFFFFF;*/
    flex-direction: row;
    /*justify-content: center;*/
    &-item {
      background-color: #efefef;
      @include border-right(1, solid, #ddd);
      @include border-bottom(1, solid, #ddd);
      padding: 20px 0;
      color: $color;
      flex: 1;
      font-size: 32px;
      text-align: center;
      color: #333;
      &-selected {
        color: $color-primary;
        @include border-bottom(1, solid, #fff);
        background-color: #fff;
      }
    }
  }
  .searchbar {
    background-color: #FFFFFF;
    padding: 20px;
    padding-bottom: 0;
    flex-direction: row;
    align-items: center;
  }

  .hots {
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 20px 10px;
    &-rows {
      flex-direction: row;
    }
    &-item {
      background-color: #f3f3f3;
      color: $color;
      font-size: 24px;
      padding: 5px 20px;
      border-radius: 10px;
      margin: 5px;
    }
  }
  .history {
    background-color: #ffffff;
    &-title {
      @include border-bottom(1, solid, #ddd);
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      &-clear {
        font-size: 28px;
        padding: 20px;
        color: $color-warning;
      }
      &-text {
        font-size: 28px;
        color: $color;
        padding: 20px;
        font-weight: bold;
      }
    }
    &-item {
      @include border-bottom(1, solid, #ddd);
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      &-text {
        font-size: 28px;
        color: #555;
        padding: 20px;
      }
      &-icon {
        font-size: 28px;
        color: $color-muted;
        width: 100px;
        text-align: right;
        height: 70px;
        line-height: 30px;
        padding: 20px;
      }
    }
  }
</style>
<script>

import { WxcGridSelect } from 'weex-ui'
let api = require('./include/api')
let navigator = require('./include/xnavigator')
let grouping = require('./include/grouping')
require('./include/page-xdom')
let storage = require('./include/xstorage')
let storageKey = 'history_search_list'
let queryparser = require('./include/queryparser')
module.exports = {
  mixins: [
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    'searchbar': require('./components/searchbar.vue'),
    WxcGridSelect
  },
  data () {
    return {
      autofocus: false,
      hotKeywordsRows: [],
      historyList: [],
      hotKeywords: [],
      searchFrom: {},
      searchFormList: [],
      keywords: ''
    }
  },
  created () {
    this.loadData()
    let param = queryparser(weex.config.bundleUrl)
    this.keywords = decodeURIComponent(param.keywords || '')
    storage.getItem(storageKey).done(rs => {
      this.historyList = rs || []
    })
  },
  methods: {
    loadData () {
      return api.page.search.data().done(rs => {
        this.hotKeywords = rs.data.hotKeywords
        this.searchFromList = rs.data.searchFromList
        this.searchFrom = this.searchFromList[0]
        this.hotKeywordsRows = grouping(this.hotKeywords, 5)
      })
    },
    selectSearchFrom (sf) {
      this.searchFrom = sf
    },
    rightItemClick () {
      navigator.pop()
    },
    search () {
      if (this.keywords === null || this.keywords.trim().length === 0) {
        return
      }
      if (this.historyList.indexOf(this.keywords) !== -1) {
        this.historyList.splice(this.historyList.indexOf(this.keywords), 1)
      }
      this.historyList.unshift(this.keywords)
      storage.setItem(storageKey, this.historyList)
      navigator.push('commission-item-search.js?keywords=' + encodeURIComponent(this.keywords) + '&searchFrom=' + this.searchFrom.value)
    },
    clickSearch (e) {
      this.keywords = e.target.attr.keywords
      this.search()
    },
    clear () {
      this.historyList = []
      storage.setItem(storageKey, this.historyList)
    },
    removeItem (e) {
      let keywords = e.target.attr.keywords
      this.historyList.splice(this.historyList.indexOf(keywords), 1)
      storage.setItem(storageKey, this.historyList)
    }
  }
}
</script>
